<template>
  <div class="bot">
      <div class="li">
          <img src="img/home1.jpg" alt=""><br>
          首页
      </div>
      <div class="li">
          <img src="img/home2.jpg" alt=""><br>
          目的地
      </div>
      <div class="li logo">
          <img src="img/home3.jpg" alt=""><br>
      </div>
      <div class="li">
          <img src="img/home4.jpg" alt=""><br>
          商城
      </div>
      <div class="li" @click="self()">
          <img src="img/home5.jpg" alt=""><br>
          我的
      </div>
  </div>
</template>

<script>
export default {
    methods:{
        self(){
            this.$router.push("/self");
        }
    }
}
</script>

<style scoped>
    .bot{
        width: 80%;
        height: 1.35rem;
        background-color: rgba(255,255,255,1);
        position: fixed;
        bottom: 0.6rem;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 0.2rem;
        display: flex;
        justify-content: space-between;
    }
    .bot .li{
        width: 20%;
        text-align: center;
    }
    .bot .li:first-child img{
        margin-bottom: 0.1rem;
    }
    .bot .li img{
        width: 40%;
        margin-top: 0.15rem;
    }
    .bot .logo img{
        width: 50%;
        margin-top: 0.3rem;
    }
</style>